<template>
  <div class="index">
    <div class="header">
      <div class="seach">
        <div class="e-seach">
          <label>公司名称：</label>
          <div class="e-seach-d">
            <el-input
              v-model="companyName"
              size="mini"
              placeholder="请输入内容"
              clearable
              @input="search"
              @change="search"
            ></el-input>
          </div>
        </div>
        <div class="e-seach e-seach1">
          <label>创建人：</label>
          <div class="e-seach-d">
            <el-select
              v-model="creater"
              size="mini"
              @change="search"
              placeholder="选择客户阶段"
            >
              <el-option label="全部" value=""> </el-option>
              <el-option
                v-for="item in userList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="e-seach">
          <label>创建时间：</label>
          <el-date-picker
            v-model="time"
            size="mini"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="search"
          >
          </el-date-picker>
        </div>
        <div class="e-seach">
          <label>客户阶段：</label>
          <el-select
            v-model="clientStageId"
            multiple
            size="mini"
            @change="search"
            placeholder="请选择"
          >
            <el-option
              v-for="item in clientStage"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <el-button type="primary" size="mini" @click="showAdd"
        >新增客户</el-button
      >
      <el-button type="primary" size="mini">扔到公海</el-button>
      <el-button type="primary" size="mini">导出</el-button>
    </div>
    <div class="tabel">
      <el-table
        :data="tableData"
        border
        header-row-class-name="my-tabel-header"
        :header-row-style="{ height: 50 + 'px' }"
        :row-style="{ height: 50 + 'px' }"
        :cell-style="{ padding: 0 + 'px' }"
        @selection-change="handleSelectionChange"
        stripe
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="companyName" label="公司名称"> </el-table-column>
        <el-table-column prop="clientName" label="客户姓名"> </el-table-column>
        <el-table-column prop="phone" label="手机号码"> </el-table-column>
        <el-table-column prop="clientStageName" label="客户阶段">
        </el-table-column>
        <el-table-column prop="clientLevelName" label="客户分级">
        </el-table-column>
        <el-table-column prop="creater" label="创建人"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-button @click="handleLook(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button @click="handleEdit(scope.row)" type="text" size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div class="my-dialog">
      <el-dialog :title="title" v-model="isShowAddDrawer" width="500px">
        <div>
          <div class="each-d">
            <label><span>*</span>客户公司：</label>
            <el-input
              v-model="customer.companyName"
              placeholder="请输入客户公司名称"
            ></el-input>
          </div>
          <div class="each-d">
            <label><span>*</span>客户姓名：</label>
            <el-input
              v-model="customer.clientName"
              placeholder="请输入客户姓名"
            ></el-input>
          </div>
          <div class="each-d">
            <label><span>*</span>客户性别：</label>
            <el-select v-model="customer.sex" placeholder="选择客户性别">
              <el-option label="女" value="2"> </el-option>
              <el-option label="男" value="1"> </el-option>
            </el-select>
          </div>
          <div class="each-d">
            <label><span>*</span>手机号码：</label>
            <el-input
              v-model="customer.phone"
              placeholder="请输入客户手机号码"
              maxlength="11"
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
            ></el-input>
          </div>
          <div class="each-d">
            <label><span>*</span> 客户阶段：</label>
            <el-select
              v-model="customer.clientStageId"
              placeholder="选择客户阶段"
            >
              <el-option
                v-for="item in clientStage"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="each-d">
            <label><span>*</span> 客户分级：</label>
            <el-select
              v-model="customer.clientLevelId"
              placeholder="选择客户阶段"
            >
              <el-option
                v-for="item in clientLevelList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="each-d">
            <label><span>*</span> 客户来源：</label>
            <el-select
              v-model="customer.customerSourceId"
              placeholder="选择客户阶段"
            >
              <el-option
                v-for="item in customerSourceList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="isShowAddDrawer = false" size="mini"
              >取 消</el-button
            >
            <el-button type="primary" @click="onSave" size="mini"
              >确 定</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
    <div class="my-dialog">
      <el-dialog
        title="客户详情"
        v-model="isShowDetail"
        width="800px"
        top="5vh"
      >
        <el-dialog width="800px" title="跟进" v-model="innerVisible">
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="newRecord.textarea"
            show-word-limit
            maxlength="500"
            resize="none"
          >
          </el-input>
          <div class="radio">
            <span
              class="e-radio"
              :class="[curRecordType == item.followWayId ? 'active' : '']"
              :label="item.followWayId"
              v-for="(item, index) in curRecordTypeList"
              :key="index"
              @click="curRecordType = item.followWayId"
              >{{ item.followWayName }}</span
            >
          </div>
          <div class="next">
            下次跟进？<el-switch
              v-model="newRecord.isNext"
              active-color="#ff4949"
              inactive-color="#dcdfe6"
            ></el-switch>
          </div>
          <div class="time" v-show="newRecord.isNext">
            <el-date-picker
              v-model="newRecord.time"
              :disabledDate="disabledDate"
              size="mini"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="innerVisible = false" size="mini"
                >取 消</el-button
              >
              <el-button type="primary" @click="addFollowWay" size="mini"
                >确 定</el-button
              >
            </span>
          </template>
        </el-dialog>
        <div>
          <div class="each-d">
            <label>客户公司：</label>
            {{ curCutomer.companyName }}
          </div>
          <div class="each-d">
            <label>客户姓名：</label>
            {{ curCutomer.clientName }}
          </div>
          <div class="each-d">
            <label>手机号码：</label>
            {{ curCutomer.phone }}
          </div>
          <div class="each-d">
            <label>客户阶段：</label>
            <el-radio-group
              v-model="curCutomer.clientStageId"
              @change="changeclientType"
            >
              <el-radio
                v-for="item in clientStage"
                :key="item.value"
                :label="item.value"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </div>
          <div class="each-d">
            <label>跟进记录：</label>
            <div class="record">
              <el-card
                class="box-card"
                v-for="(item, index) in recordList"
                :key="index"
              >
                <div class="e-record">
                  <p>跟进方式：{{ item.followWayName }}</p>
                  <p>跟进时间：{{ item.createTime }}</p>
                  <p>跟进备注：{{ item.content }}</p>
                </div>
              </el-card>
            </div>
          </div>
          <div class="each-d">
            <label></label>
            <el-button type="primary" @click="setFollowWay" size="mini">{{
              recordList.length ? "继续跟进" : "创建跟进"
            }}</el-button>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="isShowDetail = false" size="mini"
              >取 消</el-button
            >
            <el-button type="primary" @click="isShowDetail = false" size="mini"
              >确 定</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import {
  getCustomerSourceList,
  getClientLevelList,
  getClientStageList,
  saveClient,
  getClientVoList,
  getAllAccountList,
  getClientVoDetail,
  getFollowWayList,
  saveFollowClient,
  updateClient,
} from "../assets/javascript/api/customer";
const customerSourceList: any[] = [];
const clientLevelList: any[] = [];
const clientStage: any[] = [];
const userList: any[] = [];
export default defineComponent({
  name: "Home",
  data() {
    return {
      companyName: "",
      creater: "",
      time: "",
      clientStageId: [],
      title: "新增客户",
      isShowAddDrawer: false,
      isShowDetail: false,
      innerVisible: false,
      pageSize: 10,
      pageNum: 1,
      total: 0,
      //新增编辑时用户模板
      customer: {
        clientName: "", //客户姓名
        phone: "", //电话
        clientStageId: "", //客户阶段
        companyName: "", //公司名称
        customerSourceId: "", //来源
        sex: "", //性别
        clientLevelId: "", //分级
      },
      //查看时的当前用户
      curCutomer: {
        clientName: "", //客户姓名
        phone: "", //电话
        clientStageId: "", //客户阶段
        companyName: "", //公司名称
        customerSourceId: "", //来源
        sex: "", //性别
        clientLevelId: "", //分级
      },
      clientDialogType: "add",
      userList: userList,
      clientStage: clientStage,
      clientLevelList: clientLevelList,
      customerSourceList: customerSourceList,
      curRecordTypeList: [],
      tableData: [],
      recordList: [],
      newRecord: {
        textarea: "",
        isNext: false,
        time: new Date(),
      },
      curRecordType: "1",
      disabledDate(time: any) {
        return time.getTime() < Date.now() - 3600 * 1000 * 24;
      },
      timer: null,
    };
  },
  mounted() {
    (this as any).getClientStageList();
    (this as any).getAllAccountList();
    (this as any).getList();
  },
  methods: {
    //获取用户列表
    async getList() {
      let params = {
        companyName: this.companyName,
        createUserId: this.creater,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        startTime: "",
        endTime: "",
        clientStageIds: this.clientStageId.join(","),
      };
      if (this.time) {
        console.log((this.time[0] as any).getTime());

        params.startTime = (this.time[0] as any).getTime();
        params.endTime = (this.time[1] as any).getTime();
      }
      const res = await getClientVoList(params);
      if (res.code == 200) {
        const { data } = res;
        this.tableData = data;
        this.total = res.total;
      }
    },
    //获取用户详情
    async getClientVoDetail(clientId) {
      const res = await getClientVoDetail({ clientId });
      if (res.code == 200) {
        const { data } = res;
        (this.curCutomer as any).clientStageId = data.client.clientStageId;
        this.customer = data.client;
        this.recordList = data.followClientVOList;
      }
    },
    //切换每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    //切换当前页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    //search方法
    search() {
      this.pageNum = 1;
      clearTimeout((this as any).timer);
      (this as any).timer = setTimeout(() => {
        this.getList();
      }, 300);
    },
    //获取所有用户
    async getAllAccountList() {
      const res = await getAllAccountList();
      if (res.code == 200) {
        console.log(res);
        const { data } = res;
        this.userList = [];
        data.forEach((item) => {
          let obj = {
            value: item.id,
            label: item.realName,
          };
          this.userList.push(obj);
        });
      }
    },
    //获取客户来源
    async getCustomerSourceList() {
      const { data } = await getCustomerSourceList();
      this.customerSourceList = [];
      data.forEach((item: any) => {
        item.label = item.customerSourceName;
        item.value = item.customerSourceId;
        this.customerSourceList.push(item);
      });
    },
    //获取客户分级
    async getClientLevelList() {
      const { data } = await getClientLevelList();
      data.forEach((item: any) => {
        item.label = item.clientLevelName;
        item.value = item.clientLevelId;
        this.clientLevelList.push(item);
      });
    },
    //获取客户阶段
    async getClientStageList() {
      this.clientStage = [];
      const { data } = await getClientStageList();
      data.forEach((item: any) => {
        item.label = item.clientStageName;
        item.value = item.clientStageId;
        this.clientStage.push(item);
      });
    },
    //查看客户
    handleLook(row: any): void {
      var _this = this as any;
      _this.curCutomer = row;
      _this.isShowDetail = true;
      this.clientDialogType = "add";
      this.getClientVoDetail(row.clientId);
    },
    //编辑客户
    handleEdit(row: any): void {
      !this.clientLevelList.length && this.getClientLevelList();
      !this.customerSourceList.length && this.getCustomerSourceList();
      var _this = this as any;
      _this.customer = row;
      _this.title = "编辑客户";
      _this.isShowAddDrawer = true;
      this.clientDialogType = "edit";
      this.getClientVoDetail(row.clientId);
    },
    //编辑客户阶段
    async changeclientType() {
      const res = await updateClient({
        clientId: (this as any).curCutomer.clientId,
        clientStageId: this.curCutomer.clientStageId,
      });
      if (res.code == 200) {
        (this as any).$message.success("更改用户阶段成功");
        this.getList();
      }
    },
    //选中表格项
    handleSelectionChange(data: any) {
      console.log(data);
    },
    //显示新增客户
    showAdd() {
      !this.clientLevelList.length && this.getClientLevelList();
      !this.customerSourceList.length && this.getCustomerSourceList();
      this.customer = {
        clientName: "", //客户姓名
        phone: "", //电话
        clientStageId: "", //客户阶段
        companyName: "", //公司名称
        customerSourceId: "", //来源
        sex: "", //性别
        clientLevelId: "", //分级
      };
      this.isShowAddDrawer = true;
    },
    //保存新增/编辑客户
    async onSave() {
      var _this = this as any;
      if (!this.customer.companyName) {
        _this.$message.error("请输入客户公司名称");
        return false;
      }
      if (!this.customer.clientName) {
        _this.$message.error("请输入客户姓名");
        return false;
      }
      if (!this.customer.sex) {
        _this.$message.error("请选择客户性别");
        return false;
      }
      if (!this.customer.phone) {
        _this.$message.error("请输入客户电话");
        return false;
      }
      const myreg = /^[1][3,5,7,8][0-9]{9}$/;
      if (!myreg.test(this.customer.phone)) {
        _this.$message.error("输入的电话号码有误");
        return false;
      }
      if (!this.customer.clientStageId) {
        _this.$message.error("请选择客户阶段");
        return false;
      }
      if (!this.customer.clientLevelId) {
        _this.$message.error("请选择客户分级");
        return false;
      }
      if (!this.customer.customerSourceId) {
        _this.$message.error("请选择客户来源");
        return false;
      }
      const params = {
        clientName: this.customer.clientName,
        clientStageId: this.customer.clientStageId,
        companyName: this.customer.companyName,
        customerSourceId: this.customer.customerSourceId,
        sex: this.customer.sex,
        phone: this.customer.phone,
        clientLevelId: this.customer.clientLevelId,
        clientId: "",
      };
      if (this.clientDialogType == "add") {
        const res = await saveClient(params);
        if (res.code == 200) {
          _this.$message.success("新增成功");
          this.isShowAddDrawer = false;
          this.getList();
        }
      } else {
        params.clientId = (this as any).customer.clientId;
        const res = await updateClient(params);
        if (res.code == 200) {
          _this.$message.success("编辑成功");
          this.isShowAddDrawer = false;
          this.getList();
        }
      }
    },
    //继续跟进
    setFollowWay() {
      this.newRecord = {
        textarea: "",
        isNext: false,
        time: new Date(),
      };
      this.innerVisible = true;
      !this.curRecordTypeList.length && this.getFollowWayList();
    },
    //获取所有跟进方式
    async getFollowWayList() {
      const res = await getFollowWayList();
      if (res.code == 200) {
        const { data } = res;
        this.curRecordTypeList = data;
        this.curRecordType = data[0].followWayId;
      }
    },
    //新增跟进
    async addFollowWay() {
      if (!this.newRecord.textarea) {
        (this as any).$message.error("请输入跟进内容");
        return;
      }
      const res = await saveFollowClient({
        clientId: (this.curCutomer as any).clientId,
        content: this.newRecord.textarea,
        followWayId: this.curRecordType,
        followTime: this.newRecord.time
          ? (this.newRecord.time as any).getTime()
          : "",
      });
      if (res.code == 200) {
        (this as any).$message.success("新增成功");
        this.innerVisible = false;
        this.getClientVoDetail((this.curCutomer as any).clientId);
      }
    },
  },
});
</script>
<style lang="less" scoped>
.index {
  padding: 30px;
  .header {
    min-height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    .seach {
      flex: 1;
      display: flex;
      height: 50px;
      align-items: center;
      .e-seach {
        display: flex;
        align-items: center;
        margin-left: 5px;
        label {
          flex-shrink: 0;
          width: 80px;
          font-size: 14px;
        }
        .e-seach-d {
          width: 180px;
        }
        /deep/.el-select {
          width: 300px;
        }
      }
      .e-seach1 {
        /deep/.el-select {
          width: 160px;
        }
      }
    }
  }
  .tabel {
    /deep/.my-tabel-header {
      > th {
        background: #f4f4f4;
        > .cell {
          font-weight: bold;
          color: #000;
        }
      }
    }
  }
}
.my-dialog {
  /deep/.el-dialog__header {
    padding: 10px 20px;
    background: #eeecec;
    font-weight: 600;
    color: #000;
  }
  /deep/.el-dialog .el-dialog__header .el-dialog__title {
    font-size: 14px;
  }
  /deep/.el-dialog__headerbtn {
    top: 12px;
  }
  /deep/.el-dialog__footer {
    border-top: none;
  }
}
.each-d {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
  /deep/.el-select {
    width: 100%;
  }
  /deep/.el-cascader--small {
    width: 100%;
  }
  label {
    text-align: right;
    width: 100px;
    flex-shrink: 0;
    margin-right: 30px;
    span {
      color: #fd192a;
    }
  }
  .record {
    flex: 1;
    border: 1px solid #f5f5f5;
    border-radius: 4px;
    padding: 10px;
    max-height: 500px;
    overflow-y: auto;
    .e-record {
      > p {
        line-height: 20px;
      }
    }
  }
}
/deep/.el-radio.is-bordered + .el-radio.is-bordered {
  margin-left: 0;
}
.radio {
  margin-top: 20px;
  .e-radio {
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    &:hover {
      color: #b53434;
    }
  }
  .active {
    background: #b53434;
    color: #fff;
    &:hover {
      color: #fff;
    }
  }
}
.next {
  margin-top: 20px;
}
.time {
  margin-top: 20px;
}
.page {
  margin-top: 20px;
  text-align: right;
}
</style>